<template>
  <div class="city-main">
    <!-- 必须有地图的容器 -->
    <div id="allmap"></div>
    <div class="header-bar">
      <div class="title-bar">
        <span class="go-back" @click="$router.go(-1)">关闭</span>
      </div>
      <div class="search-bar">
        <input type="text" />
      </div>
    </div>
    <!-- bs -->
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <!-- .当前城市 -->
        <button @click="goPosition">定位</button>
        <!-- 热门城市 -->

        <!-- 城市列表 -->

        <div class="citye-list">
          <div class="citys-block" v-for="(v,key) in cityData" :key="key">
            <span class="city-char" :class="['city-char-'+key]">{{key}}</span>
            <!-- 遍历二级列表 -->
            <ul>
              <li v-for="item in v" :key="item.id">{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 固定的nav导航 -->
    <!-- v-slide自定义指令 -->
    <ul class="nav-char" v-slide>
      <li class="char" v-for="char in chars" :key="char">{{char}}</li>
    </ul>
    <div class="big-char" v-if="currentChar">{{currentChar}}</div>
  </div>
</template>

<script>
// webpack 原生就支持json引入
import cityData from "./data.json";
import BScroll from "@better-scroll/core";
export default {
  name: "City",
  components: {},
  data() {
    return {
      chars: [],
      cityData,
      currentChar: ""
    };
  },
  computed: {},
  created() {
    //    js生成a-z
    this.initAZ();
    console.log(this.cityData);
  },
  mounted() {
    this.$nextTick(() => {
      //创建(初始化)一个bScroll实力对象
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      });
    });
  },
  methods: {
    initAZ() {
      for (var i = 65; i <= 90; i++) {
        // ascii=>字符的转换
        var char = String.fromCharCode(i);
        this.chars.push(char);
      }
    },
    //定位
    goPosition() {
      // 百度地图API功能
      var map = new BMap.Map("allmap");
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            console.log(r);
            alert("您的位置：" + r.point.lng + "," + r.point.lat);
          } else {
            alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    }
  },
  directives: {
    slide: {
      inserted: function(el, binding, vnode) {
        //获取vue的上下文对象
        var vm = vnode.context;
        console.log("vnode=>", vnode);
        // ul距离顶部的距离
        var offsetTop = el.offsetTop;
        // ul高度
        var ulH = el.offsetHeight;
        el.ontouchstart = function(e) {
          //移动端是多点触控 这里获取第一个touch对象
          var touch = e.touches[0];
          var startY = touch.clientY;
          var endY = startY;
          var dis = endY - offsetTop;

          var index = Math.floor((dis / ulH) * vm.chars.length);
          //修正下标
          if (index < 0) {
            index = 0;
          }
          if (index >= vm.chars.length) {
            index = vm.chars.length - 1;
          }

          // console.log('index==>',index);
          vm.currentChar = vm.chars[index];
          //滚动到固定位置  scrollToElement(el, time, offsetX, offsetY, easing)
          // 遗留问题
          if (vm.currentChar && vm.$refs.wrapper) {
            var targetEl = document.querySelector(
              ".city-char-" + vm.currentChar
            );
            vm.scroll.scrollToElement(targetEl, 400, true, true);
          }

          el.ontouchmove = function(e) {
            var touch = e.touches[0];
            //移动更新endY
            endY = touch.clientY;
            dis = endY - offsetTop;
            // var index = dis/ulH*this.chars;
            var index = Math.floor((dis / ulH) * vm.chars.length);
            //修正下标
            if (index < 0) {
              index = 0;
            }
            if (index >= vm.chars.length) {
              index = vm.chars.length - 1;
            }

            // console.log('index==>',index);
            vm.currentChar = vm.chars[index];
            if (vm.currentChar && vm.$refs.wrapper) {
              var targetEl = document.querySelector(
                ".city-char-" + vm.currentChar
              );
              vm.scroll.scrollToElement(targetEl, 400, true, false);
            }
          };

          el.ontouchend = function() {
            //取消事件的绑定
            el.ontouchmove = null;
            vm.currentChar = "";
          };
        };
      }
    }
  }
};
</script>

<style scoped lang="scss">
.city-main {
  height: 100%;
  .header-bar {
    width: 100%;
    height: 68px;
    .title-bar {
      height: 32px;
    }
    .search-bar {
      height: 36px;
    }
  }
  .wrapper {
    height: 100%;
    .content {
      padding-bottom: 50px;
    }
  }

  .nav-char {
    position: fixed;
    right: 20px;
    top: 60px;
    width: 30px;
    text-align: center;
    .char {
      font-size: 12px;
      line-height: 17px;
      color: #828282;
    }
  }
  .big-char {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -100px;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 30px;
    color: #fff;
    text-align: center;
    line-height: 100px;
  }
}
</style>
